<template>
	<div class="app-container">
		<div class="filter-container tw-filter">
			<el-form ref="dataForm" :model="form" label-position="right" label-width="150px"
				style="width: 800px; margin:0 auto;">
				<el-form-item label="站点名称">
					<el-input v-model="form.site_name" class="filter-item tw-filter-input" style="width:500px" />
					<p class="tw-tip-text">{site_name}</p>
				</el-form-item>
				<el-form-item label="站点备注">
					<el-input v-model="form.site_remark" class="filter-item tw-filter-input" style="width:500px" />
					<p class="tw-tip-text">{site_remark}</p>
				</el-form-item>
				<el-form-item label="公司logo">
					<UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_1')" :showUrl="form.nav_1_str"
						:formData="{dir_type:'common',file_name:'nav_1.png'}" tip="{nav_1} 公司签章，推荐尺寸为100*100像素">
					</UploadOne>
				</el-form-item>
				<el-form-item label="站点域名">
					<el-input v-model="form.site_domain" class="filter-item tw-filter-input" style="width:500px" />
					<p class="tw-tip-text">{site_domain} 不填写http://</p>
				</el-form-item>
				<!-- <el-form-item label="站点公告">
		   <el-input  v-model="form.site_notice"  class="filter-item tw-filter-input" style="width:500px"/>
		   <p class="tw-tip-text">{site_notice}</p>
		 </el-form-item> -->

				<!--        <el-form-item label="浏览器图标">-->
				<!--          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'browser_icon')" :showUrl="form.browser_icon_str" :formData="{dir_type:'common',file_name:'browser_icon.ico',allow_type:'ico'}" tip="{browser_icon} 上传ICO图标，推荐尺寸为128*128像素"></UploadOne>-->
				<!--        </el-form-item>-->
				<!--        <el-form-item label="PC端Logo">-->
				<!--          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'site_logo_pc')" :showUrl="form.site_logo_pc_str" :formData="{dir_type:'common',file_name:'site_logo_pc.png'}" tip="{site_logo_pc} PC端LOGO，通用头部显示，推荐尺寸为180*42像素"></UploadOne>-->
				<!--        </el-form-item>-->

				<!-- <el-form-item label="公司签章" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'site_logo_wap')" :showUrl="form.site_logo_wap_str" :formData="{dir_type:'common',file_name:'site_logo_wap.png'}" tip="{site_logo_wap} 移动端端封面图"></UploadOne>
        </el-form-item> -->

				<!--        <el-form-item label="启动视频" >-->
				<!--          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'site_start_video')" :showUrl="form.site_start_video_str" :formData="{dir_type:'common',file_name:'site_start_video.png'}" tip="{site_start_video} 移动端视频封面图"></UploadOne>-->
				<!--        </el-form-item>-->

				<!-- <el-form-item label="开屏视频封面" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'site_video_img')" :showUrl="form.site_video_img_str" :formData="{dir_type:'common',file_name:'site_video_img.png'}" tip="{site_video_img} 移动端视频封面图"></UploadOne>
        </el-form-item>
        <el-form-item label="开屏视频">
          <UploadOne
            v-on:uploadCallBack="uploadCallBack($event, 'site_video')"
            :showUrl="form.site_video_str"
            :formData="{dir_type:'common', file_name:'site_video.mp4', allow_type:['mp4', 'avi', 'mov']}"
            tip="上传开屏视频，支持格式: mp4, avi, mov"
          ></UploadOne> -->

				<!-- 视频预览 -->
				<!-- <div v-if="form.site_video_str">
            <video controls style="max-width: 80%; height: 300px;">
              <source :src="form.site_video_str" type="video/mp4">
              你的浏览器不支持视频播放，请使用现代浏览器。
            </video>
          </div> -->
				<!-- </el-form-item> -->
				
       <!-- <el-form-item label="公司名称">
          <el-input  v-model="form.company_name" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_name} </p>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input  v-model="form.company_address" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_address}</p>
        </el-form-item> -->
        <el-form-item label="客服热线">
          <el-input  v-model="form.company_phone" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_phone} 多个用逗号隔开</p>
        </el-form-item>
				<!-- <el-form-item label="Email">
          <el-input  v-model="form.company_email" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_email} 多个用逗号隔开</p>
        </el-form-item> -->
				<!-- <el-form-item label="QQ">
          <el-input  v-model="form.company_qq" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_qq} 多个用逗号隔开</p>
        </el-form-item> -->
				<!-- <el-form-item label="版权信息">
          <el-input  v-model="form.site_copy" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{site_copy} 前台页面底部显示版权信息 </p>
        </el-form-item>
        <el-form-item label="ICP备案号">
          <el-input v-model="form.icp_number" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
          <p class="tw-tip-text">{icp_number} 前台页面底部显示 </p>
        </el-form-item>
        <el-form-item label="网安备案号">
          <el-input v-model="form.security_number" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
          <p class="tw-tip-text">{security_number} 前台页面底部显示 </p>
        </el-form-item>
        <el-form-item label="热门搜索词" prop="search_hot">
          <el-input v-model="form.search_hot" type="textarea" :rows="5" maxlength="250" show-word-limit placeholder="请输入热门搜索词" />
          <p class="tw-tip-text">{search_hot} 前台首页搜索框下面，多个用逗号隔开</p>
        </el-form-item>
        <el-form-item label="敏感词" prop="sensitive">
          <el-input v-model="form.sensitive" type="textarea" :rows="5" show-word-limit placeholder="请输入敏感词" />
          <p class="tw-tip-text">{sensitive} 多个用逗号隔开</p>
        </el-form-item> -->

				<!-- <el-form-item label="惠企政策" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_1')" :showUrl="form.nav_1_str" :formData="{dir_type:'common',file_name:'nav_1.png'}" tip="{nav_1} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="商联头条" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_2')" :showUrl="form.nav_2_str" :formData="{dir_type:'common',file_name:'nav_2.png'}" tip="{nav_2} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="会员服务" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_3')" :showUrl="form.nav_3_str" :formData="{dir_type:'common',file_name:'nav_3.png'}" tip="{nav_3} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="企业诉求" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_4')" :showUrl="form.nav_4_str" :formData="{dir_type:'common',file_name:'nav_4.png'}" tip="{nav_4} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="招商引资" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_5')" :showUrl="form.nav_5_str" :formData="{dir_type:'common',file_name:'nav_5.png'}" tip="{nav_5} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="银行专栏" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_6')" :showUrl="form.nav_6_str" :formData="{dir_type:'common',file_name:'nav_6.png'}" tip="{nav_6} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="商会风采" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_7')" :showUrl="form.nav_7_str" :formData="{dir_type:'common',file_name:'nav_7.png'}" tip="{nav_7} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="党建引领" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_8')" :showUrl="form.nav_8_str" :formData="{dir_type:'common',file_name:'nav_8.png'}" tip="{nav_8} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item> -->


				<!-- <el-form-item label="是否开启API加密" prop="is_api_endecrypt">
          <el-radio-group v-model="form.is_api_endecrypt">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
				<!-- <el-form-item label="微信公众号二维码">
          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'qrcode_wx')" :showUrl="form.qrcode_wx_str" :formData="{dir_type:'common'}" tip="{qrcode_wx} 推荐尺寸为270*270像素"></UploadOne>
        </el-form-item>
        <el-form-item label="微信小程序二维码">
          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'qrcode_wx_small')" :showUrl="form.qrcode_wx_small_str" :formData="{dir_type:'common'}" tip="{qrcode_wx_small} 推荐尺寸为270*270像素"></UploadOne>
        </el-form-item> -->
				<!-- <el-form-item label="多图上传">
          <UploadAll v-on:uploadCallBack="uploadCallBack($event, 'qrcode_wx_small_all')" :fileList="[]" :maxLimit="10" :formData="{dir_type:'common'}" tip="{qrcode_wx_small_all} 推荐尺寸为270*270像素"></UploadAll>
        </el-form-item> -->
			</el-form>
		</div>
		<div slot="footer">
			<el-button style="margin-left:40%;" v-waves class="filter-item tw-filter-button"
				@click="updateData()">保存数据</el-button>
		</div>
	</div>
</template>

<script>
	import waves from '@/directive/waves' // waves directive
	import UploadOne from '@/components/Upload/UploadOne'
	import UploadAll from '@/components/Upload/UploadAll'

	export default {
		directives: {
			waves
		},
		components: {
			UploadOne,
			UploadAll
		},
		data() {
			return {
				apiPath: 'project.setting',
				// 表单数据
				form: {
					site_name: '',
					site_remark: '',
					site_notice: '',
					site_domain: '',
					//browser_icon:'',
					//site_logo_pc:'',
					site_logo_wap: '',
					site_video_img: '',
					nav_1: '',
					nav_2: '',
					nav_3: '',
					nav_4: '',
					nav_5: '',
					nav_6: '',
					nav_7: '',
					nav_8: '',
					site_video: '',
					company_name: '',
					company_address: '',
					company_phone: '',
					//company_email:'',
					//company_qq:'',
					site_copy: '',
					icp_number: '',
					security_number: '',
					search_hot: '',
					sensitive: '',
					is_api_endecrypt: '',
					//qrcode_wx:'',
					//qrcode_wx_small:'',
					browser_icon_str: '',
					// site_logo_pc_str:'',
					site_logo_wap_str: '',
					site_video_img_str: '',
					nav_1_str: '',
					nav_2_str: '',
					nav_3_str: '',
					nav_4_str: '',
					nav_5_str: '',
					nav_6_str: '',
					nav_7_str: '',
					nav_8_str: '',
					site_video_str: '',
					// qrcode_wx_str:'',
					//qrcode_wx_small_str:'',
				}
			}
		},
		created() {
			// 获取详情
			this.$api.getDetail({}, this.apiPath).then(response => {
				//数据处理
				for (let key in this.form) {
					if (response.detail.hasOwnProperty(key)) {
						this.form[key] = response.detail[key]
					}
				}
			})
		},
		methods: {
			//文件上传回调
			uploadCallBack(res, fieldName = '') {
				if (fieldName) {
					this.form[fieldName] = res.fileName;
					this.form[fieldName + '_str'] = res.showUrl;
				} else {
					this.$message('图片字段错误！');
				}
			},
			// 保存数据
			updateData() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$api.edit(this.form, this.apiPath).then(response => {
							this.$message({
								message: '保存成功',
								type: 'success'
							})
						})
					}
				})
			}

		}
	}
</script>